Pernahkah ketika anda mengunjungi suatu website dan melakukan upload ? tentu saja pernah dan bahkan mungkin sangat sering. Beberapa website terkenal seperti google drive atau berbagai macam situs photo stock umumnya menggunakan multi upload yang didukung dengan fitur drag dan drop di dalamnya. Hal ini didukung dengan fitur dari javascript yang sangat memudahkan pengguna dalam kenyamanan mengakses website ( baca : Keunggulan Javascript ).
Pada dasarnya fitur ini sama saja dengan melakukan copy paste ke suatu folder. Namun karena yang di akses adalah website kita memerlukan bahasa pemrograman php untuk melakukan upload file.
Nah tanpa memperpanjang pembahasan kali ini saya akan share bagaimana cara membuat multi upload file dengan php didukung dengan kemampuan drag and drop sehingga dapat mengupload dokumen yang banyak secara cepat.
Download Source Code Drag and Drop
Adapun source code dan penjelasannya adalah sebagai berikut :
ini adalah file Index.php
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- START MENGAMBIL LIBRARY DROPZONE -->
<link href="dropzone.css" rel="stylesheet" type="text/css">
<script src="dropzone.js" type="text/javascript"></script>
<!-- END MENGAMBIL LIBRARY DROPZONE -->
<!-- START JAVASCRIPT -->
<script type='text/javascript'>
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("success", function(file) {
var ext = checkFileExt(file.name); // Get ekstensi
var newimage = "";
console.log('ext : ' + ext);
// Memeriksa Ekstensi. Jika tidak gambar maka thumbnail diganti dengan logo
if(ext != 'png' && ext != 'jpg' && ext != 'jpeg'){
newimage = "logo.png"; // default image path
}
this.createThumbnailFromUrl(file, newimage);
});
}
};
// Get file extension
function checkFileExt(filename){
filename = filename.toLowerCase();
return filename.split('.').pop();
}
</script>
<!-- END JAVASCRIPT -->
</head>
<body style="background-color:#cfd7eb">
<div class="container" >
<div class='content'>
<form action="upload.php" class="dropzone" id="myAwesomeDropzone" >
<!-- INI ADALAH AREA DROPZONENYA -->
</form>
</div>
</div>
</body>
</html>
Kemudian untuk membuat file yang kita masukkan terupload ke folder, diperlukan file aksi bernama upload.php
<?php
//Folder Lokasi Upload File
$target_dir = "upload/";
//Menangkap File
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$msg = "";
//Melakukan Upload File
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES['file']['name'])) {
$msg = "Upload File Sukses";
}else{
$msg = "Error Upload File";
}
echo $msg;
Silahkan klik download source code di atas. Semoga bermanfaat.
Info pemesanan sistem informasi, website & aplikasi lainnya hub kontak berikut :
